<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-23 17:27:18
 * @description: 组合套餐
 -->
<template>
  <view class="commodity-single">
    <view v-if="maskType === 'combo'" class="sLine" @click="showPopup('skuCart')">
      <view class="lCont">规格</view>
      <view v-if="selectedSkuItem" class="rCont combo">
        已选择: {{ selectedSkuItem ? selectedSkuItem.selectText : '无' }} <block v-if="comboGoods.box_count">({{ comboGoods.box_count }}件/单位)</block> X {{ buyCountAry.count }}<block v-if="comboGoods.box_count">单位</block>
        <image class="right_arror" src="/static/images/icon/icon_arror_right.png" />
      </view>
      <view v-else class="rCont"> 请选择
        <image class="right_arror" src="/static/images/icon/icon_arror_right.png" />
      </view>
    </view>
    <base-popup :show="pShow" :show-close="false" @close="closePopup">
      <view
        v-if="comboGoods && comboGoods.comboSkulist"
        class="maskContainer shopCartMask"
        @touchmove.prevent>
        <view class="cartClose" @click="closePopup">
          <image src="/static/images/icon/icon_close.png" />
        </view>
        <view class="cartMain">
          <view class="goodsImg">
            <b-image width="180" height="180" :src="selectedSkuItem ? selectedSkuItem.goods_pic : comboGoods.image" />
          </view>
          <view class="priceBox">
            <view class="price">
              <view v-if="groupInfo.groupPrice" class="span"><view class="b">¥</view>{{ groupInfo.groupPrice | formatMoney }}</view>
              <view v-else class="span">
                <view class="b">¥</view>
                <view v-if="selectedSkuItem"> {{ selectPrice | formatMoney }}</view>
                <view v-else>{{ comboGoods.priceArea[0] | formatMoney }} - {{ comboGoods.priceArea[1] | formatMoney }}</view>
              </view>
            </view>
            <view class="skuDec">{{ selectedSkuItem ? `已选: "${selectedSkuItem.selectText}; ${buyCountAry.count}件"` : '无' }}</view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="skuList" :scroll-with-animation="true">
          <sku-list :sku-origin="comboGoods" :sku-list="comboGoods.sku_list" :combo-list="comboGoods.comboSkulist" @selectedItem="changeSkuItem($event, comboGoods, maskType)"></sku-list>
        </scroll-view>
        <view v-if="maskType !== 'packSelect' && maskType !== 'presentSelect'" class="cartCount">
          <view class="title">购买数量
            <view v-if="selectedSkuItem && selectedSkuItem.order_limit != 0" class="small">
              (限购{{ selectedSkuItem.order_limit }}件)
            </view>
            <text v-if="(commodityType === 'boxGoods' || commodityType === 'partner') && comboGoods.min_num > 0" class="min-gray">
              ({{ comboGoods.min_num }}单位起购)
            </text>
          </view>
          <base-stepper :value.sync="buyCountAry.count" :size="34" :border-radius="4" :min="buyCountAry.min" :max="selectedSkuItem&&selectedSkuItem.order_limit!==0?selectedSkuItem.order_limit:buyCountAry.max" @change="changeQuantity($event)" />
        </view>
        <view class="cartBut maskBottomBtn" :class="{'gray': !selectedSkuItem}" @click="cartConfirm">确认</view>
      </view>
    </base-popup>
  </view>
</template>
<script>
import BaseStepper from '@/components/base/base-stepper'
import { getUserLevel } from '@/utils/common'
import SkuList from './commodity-sku'
export default {
  name: 'CommoditySingle',
  components: {
    BaseStepper,
    SkuList
  },
  props: {
    comboGoods: {
      type: Object,
      required: true,
      default: null // 是否显示遮罩层
    },
    maskType: {
      type: String,
      default: '' // 类型
    },
    groupBuy: {
      type: Object,
      default: () => { return {} } // 拼团数据
    },
    buyCountAry: {
      type: Object,
      default: () => {
        return {
          max: 9999,
          min: 1,
          count: 1
        }
      }
    },
    commodityType: {
      type: String,
      default: '' // 类型
    }
  },
  data() {
    return {
      selectPrice: 0,
      pShow: false,
      selectedSkuItem: null,
      groupParam: {},
      buyType: '',
      buyCountAryOrigin: null,
      groupInfo: {
        groupPrice: 0
      }
    }
  },
  created() {
    console.log(this.comboGoods);
  },
  methods: {
    // 获取选中组合的价格
    topShowPrice(item) {
      if (!this.token) {
        this.selectPrice = item.vip_price
      }
      if (item.from_type === 9) {
        this.selectPrice = item[getUserLevel()]
      } else {
        this.selectPrice = item.vip_price
      }
    },
    showPopup(limit) {
      if (this.groupBuy.groupInfo) {
        this.groupInfo.groupPrice = (limit === 'openGroup' ? this.groupBuy.groupInfo.groupPrice : 0)
      }
      this.buyType = limit
      if (this.selectedSkuItem && (limit === 'buyBtn' || limit === 'cartBtn')) {
        this.cartConfirm()
        return
      }
      this.pShow = true
    },
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    cartConfirm() {
      if (!this.selectedSkuItem) return
      this.closePopup()
      this.selectedSkuItem.goods_pack.pack.map(item => {
        item.selectedSkuItem = item.sku_list[0]
      })
      this.selectedSkuItem.goods_pack.present.map(item => {
        item.selectedSkuItem = item.sku_list[0]
      })
      this.$emit('confirm', {
        goods: this.selectedSkuItem,
        packageList: this.selectedSkuItem.goods_pack.pack,
        presentList: this.selectedSkuItem.goods_pack.present,
        selectedSkuItem: this.selectedSkuItem.goods_pack.pack[0].sku_list[0],
        count: (this.buyCountAry.count > this.selectedSkuItem.order_limit) && this.selectedSkuItem.order_limit !== 0 ? this.selectedSkuItem.order_limit : this.buyCountAry.count,
        maskType: this.maskType,
        buyType: this.buyType
      })
    },
    changeQuantity(num) {
      this.$emit('buyCountChange', num)
      this.$emit('buyCountChangeMax', this.buyCountAry.max)
      this.$set(this.buyCountAry, 'count', num)
    },
    async changeSkuItem(item, ringe, type) {
      console.log(item, ringe, type);
      await this.topShowPrice(item)
      const param = {
        module_name: 'comboPackage',
        data: item
      }
      if (this.buyCountAry.count > item.goods_pack.limit_num && item.goods_pack.limit_num !== 0) {
        this.$emit('buyCountChange', item.goods_pack.limit_num)
      }
      this.$emit('selectedItem', param)
      if (ringe) {
        this.$set(this, 'selectedSkuItem', item)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .rCont {
    padding-right: 20rpx;
    &.combo {
      max-width: 100%;
      display: block!important;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
.shopCartMask {
  .cartMain {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: left;
    border-bottom: 1rpx solid #f5f5f5;
    .goodsImg {
      vertical-align: middle;
      display: inline-block;
      margin: -60rpx 30rpx 30rpx 0px;
      image {width: 90px; height: 180rpx; border-radius: 5px; border: 1px solid #eaeaea;}
    }
    .priceBox {
      display: inline-block;
      margin-top: -20rpx;
      .price {
        .span {
          display: flex;
          align-items: center;
          .b{
            display: inline-block;
            font-size: $font-size-medium;
          }
          color: $color-price;
          font-size: $font-size-large;
        }
      }
      .skuDec {color: $color-tips; font-size: 12px;}
    }
  }
  .skuList {
    padding-top: 20rpx;
    max-height: 40vh;
  }
  .cartCount {
    display: flex;
    padding-top: 30rpx;
    border-top: 1rpx solid #f5f5f5;
    justify-content: space-between;
    padding-right:20rpx;
    height: 48rpx;
    .title {
      display: flex;
      color: $color-title;
      .small {
        margin-left: 5px;
        color: #FF7F00;
      }
      .min-gray {
         margin-left: 5px;
        color: #999;
        font-size: 24rpx;
      }
    }
  }
  .maskBottomBtn {
    margin-top: 30rpx;
    &.gray {
      background-color: #ddd;
    }
  }
}
</style>
